<template>
    <div>
        <el-form :inline="true" label-width="85px" ref="menuForm" label-position="top">
            <el-form-item prop="icon" style="width:100%">
                <i class="icon" :class="meta.icon" style="position: absolute; z-index: 9999; padding: 5px 10px; "></i>
                <el-select clearable filterable class="gva-select" v-model="meta.icon" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.key" :label="item.key" :value="item.key">
                        <span class="icon" :class="item.label"></span>
                        <span style="float: left">{{ item.key }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'icon',
    data() {
        return {
            input: '',
            options: [
                { key: 'gea gea-icon-home', label: 'gea gea-icon-home' },
                { key: 'gea gea-icon-auth', label: 'gea gea-icon-auth' },
                { key: 'gea gea-icon-menu', label: 'gea gea-icon-menu' },
                { key: 'gea gea-icon-role', label: 'gea gea-icon-role' },
                { key: 'gea gea-icon-team', label: 'gea gea-icon-team' },
                { key: 'gea gea-icon-api', label: 'gea gea-icon-api' },
                { key: 'gea gea-icon-setting', label: 'gea gea-icon-setting' },
                { key: 'gea gea-icon-dict', label: 'gea gea-icon-dict' },
                { key: 'gea gea-icon-tool', label: 'gea gea-icon-tool' },
                { key: 'gea gea-icon-code', label: 'gea gea-icon-code' },
                { key: 'gea gea-icon-form', label: 'gea gea-icon-form' },
                { key: 'gea gea-icon-server', label: 'gea gea-icon-server' },
                { key: 'gea gea-icon-log', label: 'gea gea-icon-log' },
                { key: 'gea gea-icon-operation', label: 'gea gea-icon-operation' },
                { key: 'gea gea-icon-user', label: 'gea gea-icon-user' },
                { key: 'gea gea-icon-exam', label: 'gea gea-icon-exam' },
                { key: 'gea gea-icon-icon', label: 'gea gea-icon-icon' },
                { key: 'gea gea-icon-about', label: 'gea gea-icon-about' },
                { key: 'gea gea-icon-we', label: 'gea gea-icon-we' },
                { key: 'el-icon-platform-eleme', label: 'el-icon-platform-eleme' },
                { key: 'el-icon-eleme', label: 'el-icon-eleme' },
                { key: 'el-icon-delete-solid', label: 'el-icon-delete-solid' },
                { key: 'el-icon-delete', label: 'el-icon-delete' },
                { key: 'el-icon-s-tools', label: 'el-icon-s-tools' },
                { key: 'el-icon-setting', label: 'el-icon-setting' },
                { key: 'el-icon-user-solid', label: 'el-icon-user-solid' },
                { key: 'el-icon-user', label: 'el-icon-user' },
                { key: 'el-icon-phone', label: 'el-icon-phone' },
                { key: 'el-icon-phone-outline', label: 'el-icon-phone-outline' },
                { key: 'el-icon-more', label: 'el-icon-more' },
                { key: 'el-icon-more-outline', label: 'el-icon-more-outline' },
                { key: 'el-icon-star-on', label: 'el-icon-star-on' },
                { key: 'el-icon-star-off', label: 'el-icon-star-off' },
                { key: 'el-icon-s-goods', label: 'el-icon-s-goods' },
                { key: 'el-icon-goods', label: 'el-icon-goods' },
                { key: 'el-icon-warning', label: 'el-icon-warning' },
                { key: 'el-icon-warning-outline', label: 'el-icon-warning-outline' },
                { key: 'el-icon-question', label: 'el-icon-question' },
                { key: 'el-icon-info', label: 'el-icon-info' },
                { key: 'el-icon-remove', label: 'el-icon-remove' },
                { key: 'el-icon-circle-plus', label: 'el-icon-circle-plus' },
                { key: 'el-icon-success', label: 'el-icon-success' },
                { key: 'el-icon-error', label: 'el-icon-error' },
                { key: 'el-icon-zoom-in', label: 'el-icon-zoom-in' },
                { key: 'el-icon-zoom-out', label: 'el-icon-zoom-out' },
                { key: 'el-icon-remove-outline', label: 'el-icon-remove-outline' },
                { key: 'el-icon-circle-plus-outline', label: 'el-icon-circle-plus-outline' },
                { key: 'el-icon-circle-check', label: 'el-icon-circle-check' },
                { key: 'el-icon-circle-close', label: 'el-icon-circle-close' },
                { key: 'el-icon-s-help', label: 'el-icon-s-help' },
                { key: 'el-icon-help', label: 'el-icon-help' },
                { key: 'el-icon-minus', label: 'el-icon-minus' },
                { key: 'el-icon-plus', label: 'el-icon-plus' },
                { key: 'el-icon-check', label: 'el-icon-check' },
                { key: 'el-icon-close', label: 'el-icon-close' },
                { key: 'el-icon-picture', label: 'el-icon-picture' },
                { key: 'el-icon-picture-outline', label: 'el-icon-picture-outline' },
                {
                    key: 'el-icon-picture-outline-round',
                    label: 'el-icon-picture-outline-round',
                },
                { key: 'el-icon-upload', label: 'el-icon-upload' },
                { key: 'el-icon-upload2', label: 'el-icon-upload2' },
                { key: 'el-icon-download', label: 'el-icon-download' },
                { key: 'el-icon-camera-solid', label: 'el-icon-camera-solid' },
                { key: 'el-icon-camera', label: 'el-icon-camera' },
                { key: 'el-icon-video-camera-solid', label: 'el-icon-video-camera-solid' },
                { key: 'el-icon-video-camera', label: 'el-icon-video-camera' },
                { key: 'el-icon-message-solid', label: 'el-icon-message-solid' },
                { key: 'el-icon-bell', label: 'el-icon-bell' },
                { key: 'el-icon-s-cooperation', label: 'el-icon-s-cooperation' },
                { key: 'el-icon-s-order', label: 'el-icon-s-order' },
                { key: 'el-icon-s-platform', label: 'el-icon-s-platform' },
                { key: 'el-icon-s-fold', label: 'el-icon-s-fold' },
                { key: 'el-icon-s-unfold', label: 'el-icon-s-unfold' },
                { key: 'el-icon-s-operation', label: 'el-icon-s-operation' },
                { key: 'el-icon-s-promotion', label: 'el-icon-s-promotion' },
                { key: 'el-icon-s-home', label: 'el-icon-s-home' },
                { key: 'el-icon-s-release', label: 'el-icon-s-release' },
                { key: 'el-icon-s-ticket', label: 'el-icon-s-ticket' },
                { key: 'el-icon-s-management', label: 'el-icon-s-management' },
                { key: 'el-icon-s-open', label: 'el-icon-s-open' },
                { key: 'el-icon-s-shop', label: 'el-icon-s-shop' },
                { key: 'el-icon-s-marketing', label: 'el-icon-s-marketing' },
                { key: 'el-icon-s-flag', label: 'el-icon-s-flag' },
                { key: 'el-icon-s-comment', label: 'el-icon-s-comment' },
                { key: 'el-icon-s-finance', label: 'el-icon-s-finance' },
                { key: 'el-icon-s-claim', label: 'el-icon-s-claim' },
                { key: 'el-icon-s-custom', label: 'el-icon-s-custom' },
                { key: 'el-icon-s-opportunity', label: 'el-icon-s-opportunity' },
                { key: 'el-icon-s-data', label: 'el-icon-s-data' },
                { key: 'el-icon-s-check', label: 'el-icon-s-check' },
                { key: 'el-icon-s-grid', label: 'el-icon-s-grid' },
                { key: 'el-icon-menu', label: 'el-icon-menu' },
                { key: 'el-icon-share', label: 'el-icon-share' },
                { key: 'el-icon-d-caret', label: 'el-icon-d-caret' },
                { key: 'el-icon-caret-left', label: 'el-icon-caret-left' },
                { key: 'el-icon-caret-right', label: 'el-icon-caret-right' },
                { key: 'el-icon-caret-bottom', label: 'el-icon-caret-bottom' },
                { key: 'el-icon-caret-top', label: 'el-icon-caret-top' },
                { key: 'el-icon-bottom-left', label: 'el-icon-bottom-left' },
                { key: 'el-icon-bottom-right', label: 'el-icon-bottom-right' },
                { key: 'el-icon-back', label: 'el-icon-back' },
                { key: 'el-icon-right', label: 'el-icon-right' },
                { key: 'el-icon-bottom', label: 'el-icon-bottom' },
                { key: 'el-icon-top', label: 'el-icon-top' },
                { key: 'el-icon-top-left', label: 'el-icon-top-left' },
                { key: 'el-icon-top-right', label: 'el-icon-top-right' },
                { key: 'el-icon-arrow-left', label: 'el-icon-arrow-left' },
                { key: 'el-icon-arrow-right', label: 'el-icon-arrow-right' },
                { key: 'el-icon-arrow-down', label: 'el-icon-arrow-down' },
                { key: 'el-icon-arrow-up', label: 'el-icon-arrow-up' },
                { key: 'el-icon-d-arrow-left', label: 'el-icon-d-arrow-left' },
                { key: 'el-icon-d-arrow-right', label: 'el-icon-d-arrow-right' },
                { key: 'el-icon-video-pause', label: 'el-icon-video-pause' },
                { key: 'el-icon-video-play', label: 'el-icon-video-play' },
                { key: 'el-icon-refresh', label: 'el-icon-refresh' },
                { key: 'el-icon-refresh-right', label: 'el-icon-refresh-right' },
                { key: 'el-icon-refresh-left', label: 'el-icon-refresh-left' },
                { key: 'el-icon-finished', label: 'el-icon-finished' },
                { key: 'el-icon-sort', label: 'el-icon-sort' },
                { key: 'el-icon-sort-up', label: 'el-icon-sort-up' },
                { key: 'el-icon-sort-down', label: 'el-icon-sort-down' },
                { key: 'el-icon-rank', label: 'el-icon-rank' },
                { key: 'el-icon-loading', label: 'el-icon-loading' },
                { key: 'el-icon-view', label: 'el-icon-view' },
                { key: 'el-icon-c-scale-to-original', label: 'el-icon-c-scale-to-original' },
                { key: 'el-icon-date', label: 'el-icon-date' },
                { key: 'el-icon-edit', label: 'el-icon-edit' },
                { key: 'el-icon-edit-outline', label: 'el-icon-edit-outline' },
                { key: 'el-icon-folder', label: 'el-icon-folder' },
                { key: 'el-icon-folder-opened', label: 'el-icon-folder-opened' },
                { key: 'el-icon-folder-add', label: 'el-icon-folder-add' },
                { key: 'el-icon-folder-remove', label: 'el-icon-folder-remove' },
                { key: 'el-icon-folder-delete', label: 'el-icon-folder-delete' },
                { key: 'el-icon-folder-checked', label: 'el-icon-folder-checked' },
                { key: 'el-icon-tickets', label: 'el-icon-tickets' },
                { key: 'el-icon-document-remove', label: 'el-icon-document-remove' },
                { key: 'el-icon-document-delete', label: 'el-icon-document-delete' },
                { key: 'el-icon-document-copy', label: 'el-icon-document-copy' },
                { key: 'el-icon-document-checked', label: 'el-icon-document-checked' },
                { key: 'el-icon-document', label: 'el-icon-document' },
                { key: 'el-icon-document-add', label: 'el-icon-document-add' },
                { key: 'el-icon-printer', label: 'el-icon-printer' },
                { key: 'el-icon-paperclip', label: 'el-icon-paperclip' },
                { key: 'el-icon-takeaway-box', label: 'el-icon-takeaway-box' },
                { key: 'el-icon-search', label: 'el-icon-search' },
                { key: 'el-icon-monitor', label: 'el-icon-monitor' },
                { key: 'el-icon-attract', label: 'el-icon-attract' },
                { key: 'el-icon-mobile', label: 'el-icon-mobile' },
                { key: 'el-icon-scissors', label: 'el-icon-scissors' },
                { key: 'el-icon-umbrella', label: 'el-icon-umbrella' },
                { key: 'el-icon-headset', label: 'el-icon-headset' },
                { key: 'el-icon-brush', label: 'el-icon-brush' },
                { key: 'el-icon-mouse', label: 'el-icon-mouse' },
                { key: 'el-icon-coordinate', label: 'el-icon-coordinate' },
                { key: 'el-icon-magic-stick', label: 'el-icon-magic-stick' },
                { key: 'el-icon-reading', label: 'el-icon-reading' },
                { key: 'el-icon-data-line', label: 'el-icon-data-line' },
                { key: 'el-icon-data-board', label: 'el-icon-data-board' },
                { key: 'el-icon-pie-chart', label: 'el-icon-pie-chart' },
                { key: 'el-icon-data-analysis', label: 'el-icon-data-analysis' },
                { key: 'el-icon-collection-tag', label: 'el-icon-collection-tag' },
                { key: 'el-icon-film', label: 'el-icon-film' },
                { key: 'el-icon-suitcase', label: 'el-icon-suitcase' },
                { key: 'el-icon-suitcase-1', label: 'el-icon-suitcase-1' },
                { key: 'el-icon-receiving', label: 'el-icon-receiving' },
                { key: 'el-icon-collection', label: 'el-icon-collection' },
                { key: 'el-icon-files', label: 'el-icon-files' },
                { key: 'el-icon-notebook-1', label: 'el-icon-notebook-1' },
                { key: 'el-icon-notebook-2', label: 'el-icon-notebook-2' },
                { key: 'el-icon-toilet-paper', label: 'el-icon-toilet-paper' },
                { key: 'el-icon-office-building', label: 'el-icon-office-building' },
                { key: 'el-icon-school', label: 'el-icon-school' },
                { key: 'el-icon-table-lamp', label: 'el-icon-table-lamp' },
                { key: 'el-icon-house', label: 'el-icon-house' },
                { key: 'el-icon-no-smoking', label: 'el-icon-no-smoking' },
                { key: 'el-icon-smoking', label: 'el-icon-smoking' },
                { key: 'el-icon-shopping-cart-full', label: 'el-icon-shopping-cart-full' },
                { key: 'el-icon-shopping-cart-1', label: 'el-icon-shopping-cart-1' },
                { key: 'el-icon-shopping-cart-2', label: 'el-icon-shopping-cart-2' },
                { key: 'el-icon-shopping-bag-1', label: 'el-icon-shopping-bag-1' },
                { key: 'el-icon-shopping-bag-2', label: 'el-icon-shopping-bag-2' },
                { key: 'el-icon-sold-out', label: 'el-icon-sold-out' },
                { key: 'el-icon-sell', label: 'el-icon-sell' },
                { key: 'el-icon-present', label: 'el-icon-present' },
                { key: 'el-icon-box', label: 'el-icon-box' },
                { key: 'el-icon-bank-card', label: 'el-icon-bank-card' },
                { key: 'el-icon-money', label: 'el-icon-money' },
                { key: 'el-icon-coin', label: 'el-icon-coin' },
                { key: 'el-icon-wallet', label: 'el-icon-wallet' },
                { key: 'el-icon-discount', label: 'el-icon-discount' },
                { key: 'el-icon-price-tag', label: 'el-icon-price-tag' },
                { key: 'el-icon-news', label: 'el-icon-news' },
                { key: 'el-icon-guide', label: 'el-icon-guide' },
                { key: 'el-icon-male', label: 'el-icon-male' },
                { key: 'el-icon-female', label: 'el-icon-female' },
                { key: 'el-icon-thumb', label: 'el-icon-thumb' },
                { key: 'el-icon-cpu', label: 'el-icon-cpu' },
                { key: 'el-icon-link', label: 'el-icon-link' },
                { key: 'el-icon-connection', label: 'el-icon-connection' },
                { key: 'el-icon-open', label: 'el-icon-open' },
                { key: 'el-icon-turn-off', label: 'el-icon-turn-off' },
                { key: 'el-icon-set-up', label: 'el-icon-set-up' },
                { key: 'el-icon-chat-round', label: 'el-icon-chat-round' },
                { key: 'el-icon-chat-line-round', label: 'el-icon-chat-line-round' },
                { key: 'el-icon-chat-square', label: 'el-icon-chat-square' },
                { key: 'el-icon-chat-dot-round', label: 'el-icon-chat-dot-round' },
                { key: 'el-icon-chat-dot-square', label: 'el-icon-chat-dot-square' },
                { key: 'el-icon-chat-line-square', label: 'el-icon-chat-line-square' },
                { key: 'el-icon-message', label: 'el-icon-message' },
                { key: 'el-icon-postcard', label: 'el-icon-postcard' },
                { key: 'el-icon-position', label: 'el-icon-position' },
                { key: 'el-icon-turn-off-microphone', label: 'el-icon-turn-off-microphone' },
                { key: 'el-icon-microphone', label: 'el-icon-microphone' },
                { key: 'el-icon-close-notification', label: 'el-icon-close-notification' },
                { key: 'el-icon-bangzhu', label: 'el-icon-bangzhu' },
                { key: 'el-icon-time', label: 'el-icon-time' },
                { key: 'el-icon-odometer', label: 'el-icon-odometer' },
                { key: 'el-icon-crop', label: 'el-icon-crop' },
                { key: 'el-icon-aim', label: 'el-icon-aim' },
                { key: 'el-icon-switch-button', label: 'el-icon-switch-button' },
                { key: 'el-icon-full-screen', label: 'el-icon-full-screen' },
                { key: 'el-icon-copy-document', label: 'el-icon-copy-document' },
                { key: 'el-icon-mic', label: 'el-icon-mic' },
                { key: 'el-icon-stopwatch', label: 'el-icon-stopwatch' },
                { key: 'el-icon-medal-1', label: 'el-icon-medal-1' },
                { key: 'el-icon-medal', label: 'el-icon-medal' },
                { key: 'el-icon-trophy', label: 'el-icon-trophy' },
                { key: 'el-icon-trophy-1', label: 'el-icon-trophy-1' },
                { key: 'el-icon-first-aid-kit', label: 'el-icon-first-aid-kit' },
                { key: 'el-icon-discover', label: 'el-icon-discover' },
                { key: 'el-icon-place', label: 'el-icon-place' },
                { key: 'el-icon-location', label: 'el-icon-location' },
                { key: 'el-icon-location-outline', label: 'el-icon-location-outline' },
                { key: 'el-icon-location-information', label: 'el-icon-location-information' },
                { key: 'el-icon-add-location', label: 'el-icon-add-location' },
                { key: 'el-icon-delete-location', label: 'el-icon-delete-location' },
                { key: 'el-icon-map-location', label: 'el-icon-map-location' },
                { key: 'el-icon-alarm-clock', label: 'el-icon-alarm-clock' },
                { key: 'el-icon-timer', label: 'el-icon-timer' },
                { key: 'el-icon-watch-1', label: 'el-icon-watch-1' },
                { key: 'el-icon-watch', label: 'el-icon-watch' },
                { key: 'el-icon-lock', label: 'el-icon-lock' },
                { key: 'el-icon-unlock', label: 'el-icon-unlock' },
                { key: 'el-icon-key', label: 'el-icon-key' },
                { key: 'el-icon-service', label: 'el-icon-service' },
                { key: 'el-icon-mobile-phone', label: 'el-icon-mobile-phone' },
                { key: 'el-icon-bicycle', label: 'el-icon-bicycle' },
                { key: 'el-icon-truck', label: 'el-icon-truck' },
                { key: 'el-icon-ship', label: 'el-icon-ship' },
                { key: 'el-icon-basketball', label: 'el-icon-basketball' },
                { key: 'el-icon-football', label: 'el-icon-football' },
                { key: 'el-icon-soccer', label: 'el-icon-soccer' },
                { key: 'el-icon-baseball', label: 'el-icon-baseball' },
                { key: 'el-icon-wind-power', label: 'el-icon-wind-power' },
                { key: 'el-icon-light-rain', label: 'el-icon-light-rain' },
                { key: 'el-icon-lightning', label: 'el-icon-lightning' },
                { key: 'el-icon-heavy-rain', label: 'el-icon-heavy-rain' },
                { key: 'el-icon-sunrise', label: 'el-icon-sunrise' },
                { key: 'el-icon-sunrise-1', label: 'el-icon-sunrise-1' },
                { key: 'el-icon-sunset', label: 'el-icon-sunset' },
                { key: 'el-icon-sunny', label: 'el-icon-sunny' },
                { key: 'el-icon-cloudy', label: 'el-icon-cloudy' },
                { key: 'el-icon-partly-cloudy', label: 'el-icon-partly-cloudy' },
                { key: 'el-icon-cloudy-and-sunny', label: 'el-icon-cloudy-and-sunny' },
                { key: 'el-icon-moon', label: 'el-icon-moon' },
                { key: 'el-icon-moon-night', label: 'el-icon-moon-night' },
                { key: 'el-icon-dish', label: 'el-icon-dish' },
                { key: 'el-icon-dish-1', label: 'el-icon-dish-1' },
                { key: 'el-icon-food', label: 'el-icon-food' },
                { key: 'el-icon-chicken', label: 'el-icon-chicken' },
                { key: 'el-icon-fork-spoon', label: 'el-icon-fork-spoon' },
                { key: 'el-icon-knife-fork', label: 'el-icon-knife-fork' },
                { key: 'el-icon-burger', label: 'el-icon-burger' },
                { key: 'el-icon-tableware', label: 'el-icon-tableware' },
                { key: 'el-icon-sugar', label: 'el-icon-sugar' },
                { key: 'el-icon-dessert', label: 'el-icon-dessert' },
                { key: 'el-icon-ice-cream', label: 'el-icon-ice-cream' },
                { key: 'el-icon-hot-water', label: 'el-icon-hot-water' },
                { key: 'el-icon-water-cup', label: 'el-icon-water-cup' },
                { key: 'el-icon-coffee-cup', label: 'el-icon-coffee-cup' },
                { key: 'el-icon-cold-drink', label: 'el-icon-cold-drink' },
                { key: 'el-icon-goblet', label: 'el-icon-goblet' },
                { key: 'el-icon-goblet-full', label: 'el-icon-goblet-full' },
                { key: 'el-icon-goblet-square', label: 'el-icon-goblet-square' },
                { key: 'el-icon-goblet-square-full', label: 'el-icon-goblet-square-full' },
                { key: 'el-icon-refrigerator', label: 'el-icon-refrigerator' },
                { key: 'el-icon-grape', label: 'el-icon-grape' },
                { key: 'el-icon-watermelon', label: 'el-icon-watermelon' },
                { key: 'el-icon-cherry', label: 'el-icon-cherry' },
                { key: 'el-icon-apple', label: 'el-icon-apple' },
                { key: 'el-icon-pear', label: 'el-icon-pear' },
                { key: 'el-icon-orange', label: 'el-icon-orange' },
                { key: 'el-icon-coffee', label: 'el-icon-coffee' },
                { key: 'el-icon-ice-tea', label: 'el-icon-ice-tea' },
                { key: 'el-icon-ice-drink', label: 'el-icon-ice-drink' },
                { key: 'el-icon-potato-strips', label: 'el-icon-potato-strips' },
                { key: 'el-icon-lollipop', label: 'el-icon-lollipop' },
                { key: 'el-icon-ice-cream-square', label: 'el-icon-ice-cream-square' },
                { key: 'el-icon-ice-cream-round', label: 'el-icon-ice-cream-round' },
            ],
            value: '',
        }
    },
    props: {
        meta: {
            default: function () {
                return {}
            },
            type: Object,
        },
    },
    methods: {},
}
</script>

<style lang="scss">
.icon {
    float: left;
    color: rgb(132, 146, 166);
    font-size: 13px;
    line-height: 34px;
    margin-right: 10px;
}
.gva-select .el-input__inner {
    padding: 0 30px !important;
}
</style>
